<template>
	<view class="main-container">
	<HeaderBar title="新闻资讯" :titleColor="titleColor" :navBarBgc="headerBgc" :isFixed="true"></HeaderBar>
			
	<view class="newsList_content">
		<view class="news-top-title">
			<image src="http://img.abatour.com/2025-05-05/xiaoxi@2x (1)_1746431489659.png" mode=""></image>
			<text>新闻资讯</text>
		</view>
		<!-- 新闻列表 -->
		<scroll-view scroll-y v-if="newsDataList.length" :show-scrollbar="false" class="news-container" @scrolltolower="scrollGetMore">
			  <view  class="news-item-box" @click="gotoNewsDetail(item)"  v-for="item in newsDataList" :key="item">
				 <image class="item-left-image" :src="item.headImage" mode="aspectFill"></image>
				 <view class="item-right-box">
					 <view class="news-title-box flex-col">
						<text class="news-title">{{item.title}}</text>
						<text class="news-sub-title">{{item.subTitle}}</text>
					 </view>
					 <view class="news-detail">
						<text>查看更多</text>
						  <wd-icon name="chevron-right" size="14px" color="#2B2B24"></wd-icon>
					 </view>
				 </view>
			  </view>
			 
			   <view class="vlog-container">
			        <wd-loadmore
			            custom-class="loadmore"
			            :state="loading"
			            :loading-props="{color:'#26704e'}"
			        ></wd-loadmore>
			      </view>
		</scroll-view>
		<view class="nodataStyle" v-else>
							<wd-status-tip image="content" tip="暂无内容" />
						</view>
	</view>
	
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue";
	import{
		getDataList
	} from '../../utils/commonMethods'
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import HeaderBar from "@/components/HeaderBar/index.vue";
	const newsDataList= ref ([])
	const loading = ref("");
	const headerBgc = ref("transparent");
	const titleColor = ref("#2D2D2D");
	const clickLoading = ref(false);
	/**
	 * 滚动到底部拿下一页数据
	*/
	const scrollGetMore = (e) => {
		if(loading.value=="loading") return
		if(query.value.query.total==newsDataList.length) return loading.value="finished"
		loading.value="loading"
		query.value.query.pageNo++
		getNewsList()
	};
	/**
	 * 获取数据
	*/
	async function getNewsList(){
		uni.showLoading({
			title:'加载中'
		})
		let res=await getDataList(query.value)
		uni.hideLoading()
		if(!res) return loading.value="error"
		newsDataList.value=[...newsDataList.value,...res.result]
		query.value.query.total=res.total
		loading.value="finished"
	}
	/**
	 * 查看详情
	*/
	const gotoNewsDetail = (item) => {
		if(clickLoading.value) return
		clickLoading.value=true
		uni.navigateTo({
			url:"/fiveMajorSubPack/pages/hospitable/newsDetail?id="+item.id+"&title=新闻资讯",
			complete(){
				clickLoading.value=false
			}
		})
	};
	//获取列表参数
	const query=ref({
		userVlog:{
			type:1
		},
		query:{
			pageNo:1,
			pageSize:20,
			total:0
		}
	})
	onLoad(()=>{
		getNewsList()
	})
</script>

<style lang="scss" scoped>
.nodataStyle{
		width: 100%;
		margin-top: 250rpx;
	}
	.newsList_content{
		height: 100vh;
		box-sizing: border-box;
		width: 100%;
		position: flex;
		flex-direction: column;
		padding: 158rpx 28rpx 80rpx;
		overflow: hidden;
		background: linear-gradient(to bottom, #b4cab7 30px, #eeefe7 100px);
		.news-top-title{
			font-size: 41rpx;
			color: #2B2B24;
			font-weight: 1000;
			display: flex;
			align-items: center;
			image{
				width: 29rpx;
				height: 35rpx;
				margin-right: 15rpx;
			}
		}
	}
	.main-container {
		min-height: 100vh;
		background-color: #fff;

		:deep(.swiper-container) {
			margin-top: -100rpx;
			position: relative;
			--wot-swiper-radius: 0;
		}


		.news-container::-webkit-scrollbar {
			  display: none; /* Chrome/Safari */
			}
		.news-container {
			width: 100%;
			height: 100%;
			overflow: scroll;
			-ms-overflow-style: none; /* IE/Edge */
			scrollbar-width: none; /* Firefox */
			margin-top: 41rpx;
			margin-bottom: 50rpx;
			.news-item-box {
				background-color: #fff;
				position: relative;
				border-radius: 10rpx;
				width: 100%;
				height: 208rpx;
				margin-right: 28rpx;
				display: flex;
				margin-bottom: 20rpx;

				.item-left-image {
					width: 208rpx;
					height: 208rpx;
					border-radius: 10rpx;
				}
				.item-right-box{
					width: calc(100% - 208rpx);
					padding: 20rpx;
					display: flex;
					flex-direction: column;
					color:#2B2B24;
					font-size: 29rpx;
					justify-content: space-between;
					overflow: hidden;
					.news-title-box{
						width: 100%;
						overflow: hidden;
						text-overflow: ellipsis;
						text{
							display: block;
							width: 100%;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}
					}
					.news-title{
						font-weight: bold;
					}
					.news-detail{
						color:#2B2B24;
						display: flex;
						align-items: center;
						text-align: right;
						text {
							width: 100%;
							font-size: 25rpx;
						}
					}
			
				}

				}

			.explore-item-container:last-child {
				margin-right: 28rpx;
			}
			.more-news{
				height: 100rpx;
				line-height: 100rpx;
				width: 100%;
				text-align: center;
			}
		}


		.vlog-container {
			padding: 0 28rpx;
		}
	}
</style>